<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式/尺寸操作</title>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值
		 css（）                 功能：
		                              一个参：传入css属性名
									  功能：获取匹配元素集合中第一个元素的css属性值
									  两个参：
									  n个参：
		 width（）height（） 功能：匹配元素集合中第一个元素宽高高度
		                                     无参：获取匹配元素集合中第一个元素宽高度
											 有参：设置匹配元素集合中第一个元素宽高度
											 width（数值）
		 outerWidth（）和outerHeight（）
		 出现原因：元素存在盒子中，盒子模型、宽度计算方式、：内外边距+边框+内容
		 无参：获取元素的宽高度，计算模型：内边距+边框
		 有参：传入bool值，true是计算盒子模型：内外边距+边框
		 -->
		 
		 <!--  css ：    .box添加样式  背景颜色  、内外边距 ：20px 边框5px
		                     .result添加样式  ：上外边距 ：10px  ，字体加粗
				引入jq框架
							 
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.box{
				background-color: #ff5500;
				padding: 20px;
				margin: 20px;
				border: 5px solid #000000;
			}
			.result{
				margin: 10px;
				font-weight: bold;
			}
			.boss{
							width: 300px;
							height: 300px;
							background-color: #ffaa7f;
							border-radius: 50%;
							background-image: url(../img/3.png);
							background-size: 100% 100%;
							color: transparent;
							display: block;
						}
		</style>
	</head>
	<body>
		
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色效果</button>
		<button id="SetBtn">设置多属性效果</button>
		<button id="gsBtn">获取元素宽度/设置元素宽度</button>
		<button id="bpBtn">获取高度（内边距+边框）</button>
		<button id="bpmBtn">获取高度（内边距+边框）</button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			/* 1.点击获取颜色属性值  按钮  获取颜色值并打印页面上*/
			$("#getColorbtn").click(function(){
					//获取css属性值方式 ：传入属性名即可
				var bgColor=$(".box").css("background-color");
				//页面上打印属性值？？
				$(".result").text("获取属性值："+bgColor);
				/* 2.点击  设置颜色效果 按钮   设置颜色并打印页面上 */
				$("#setColorbtn").click(function(){
					//改成橙色
					$(".box").css("background-color","aquamarine");
					$("#result").text("改变后颜色为：橙色")
				});
				//3.点击   设置多属性效果   按钮  圆   、背景色  、阴影  、
				$("#SetBtn").click(function(){
					$(".box").css({"background-color":"#ffaa7f",
					"border":"5px solid #ff0"});
				});
		              //4.点击    获取   、设置宽度
					  $("#gsBtn").click(function(){
						 var w= $(".box").width();
						  $("#result").text("获取宽度是："+w+"px");
					  });
			//5.点击  获取高度   按钮  计算box  空间高度
			$("#bpBtn").click(function(){
				var bp=$(".box").outerHeight();
				$("#result").text("获取高度为："+bp+"px")
			});
		$("#bpmBtn").click(function(){
			var bp=$(".box").outerHeight(true);
			$("#result").text("获取高度为："+bp+"px")
		});
			});
		</script>
	</body>
</html>